<template>
    <div class="layout-container">
        <div class="layout-container-left">
            <UseTable :tableData="tableData" multiple @change="change" />
        </div>

        <div class="layout-container-right">

            <div class="form-box">
                <el-form label-width="auto">
                    <el-form-item label="相关系数计算方法">
                        <el-input v-model="paramsData.method" placeholder="相关系数计算方法" />
                    </el-form-item>

                    <el-form-item>
                        <div class="data-select">
                            <DmData @dataChange="dataChange" />
                            <Upload @uploadSuccess="uploadSuccess" />
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="handleCalculate">计算</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-divider />

            <div class="info-box">
                <h5>算法说明</h5>
                <p>计算变量间的相关系数（Pearson：线性相关；Spearman：秩相关；Kendall：等级相关），生成相关矩阵和热力图。</p>

                <h5>使用范围</h5>
                <ul>
                    <li>分析变量间的相关性（如降雨量与农作物产量的关系）；</li>
                    <li>特征选择（排除高度相关的冗余特征）；</li>
                    <li>Pearson 适用于正态分布数据，Spearman/Kendall 适用于非正态或有序数据。</li>
                </ul>
            </div>
        </div>

        <Result v-model="resultShow" :originalData="originalData" :result="resultData" />
    </div>
</template>

<script setup lang="ts">
import {onActivated, onMounted, ref} from "vue"
import {ElMessage}                   from "element-plus"
import {correlation}                 from "@/api/group.js"
import Result                        from "./components/Result.vue"
import {getExcel}                    from "@/api/data"
import Upload                        from "@/components/Upload.vue"
import UseTable                      from "@/components/UseTable.vue"
import DmData                        from "@/components/DmData.vue"

function dataChange(data) {
    tableData.value = data
}

function uploadSuccess(res) {
    tableData.value = res.data
}

let originalData = ref({
    listColumn: [],
    listAll   : []
})

function change(listColumn, listAll) {
    originalData.value.listColumn = listColumn
    originalData.value.listAll    = listAll

    // 给数据赋值
    paramsData.value.data = []

    let maxLength = Math.max(...listColumn.map(item => item.value.length))

    paramsData.value.data = Array.from({length: maxLength}, (_, index) =>
        listColumn.map(item => item.value[index])
    )

    // 给变量创建临时变量名
    paramsData.value.variableNames = []
    if (listAll.length > 0) {
        // 获取第一条数据的第一个键名（即第一列的字段名）
        const firstColumnKey           = Object.keys(listAll[0])[0]
        // 用第一列的所有值作为变量名
        paramsData.value.variableNames = listAll.map(item => item[firstColumnKey] || `变量${listAll.indexOf(item)}`)
    }
}

let paramsData = ref({
    data         : [],
    method       : "pearson",
    variableNames: []
})

let resultShow = ref(false)
let resultData = ref("")

function handleCalculate() {
    if (paramsData.value.data.length === 0) {
        ElMessage.warning("请选择数据")
        return
    }
    if (paramsData.value.data.length > 20) {
        ElMessage.warning("数据过多,计算困难,请选择20条以内的数据进行计算")
        return
    }

    if (!paramsData.value.method) {
        ElMessage.warning("请填写参数")
        return
    }

    correlation(paramsData.value).then(res => {
        resultData.value = res?.data
        resultShow.value = true
    })
}

let loading   = ref(true)
let tableData = ref([])

let getTableData = () => {
    loading.value = true

    getExcel("correlation").then(res => res.data).then(data => tableData.value = data)

    loading.value = false
}

/**
 * 初始化参数
 */
function initParam() {

}

// -----------------------------主程序start-----------------------------------------
onMounted(() => {
    initParam()
    getTableData()
})

onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>

<style scoped>

</style>

